<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>JSON在线解析及格式化验证 - JSON.cn</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="max-age=3600" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <style></style>
</head>
<body style="over-flow:hidden;">
  <header class="header">
      <div class="row-fluid" >
          <div class="col-md-5" style="position:relative;">
              <a class="logo" href="jsoncn.html">
                Json.<span style="color:#4A5560;">cn</span>
              </a>
          </div>
          <br style="clear:both;" />
      </div>
  </header>

  <main class="row-fluid" style="height:85%;min-height:550px;">
    <div class="col-md-5" style="padding:0px;height:100%;">
        <textarea id="json-src" placeholder="在此输入json字符串或XML字符串..." class="form-control common-font-size"
        style="height:100%;height: 87vh;min-height:520px;padding:10px 10px 10px 30px;border:0;border-right:solid 1px #E5EBEE;border-bottom:solid 1px #eee;border-radius:0;resize: none; outline:none;"></textarea>
    </div>
    <div class="col-md-7" style="padding:0;position:relative;height:100%;">
        <div  class="tool" style="position:absolute;">
            <a href="#" class="tip zip" title="压缩"  data-placement="bottom"><i class="fa fa-database"></i></a>
            <a href="#" class="tip xml" title="转XML"  data-placement="bottom"><i class="fa fa-file-excel-o"></i></a>
            <a href="#" class="tip shown"  title="显示行号"  data-placement="bottom"><i class="glyphicon glyphicon-sort-by-order"></i></a>
            <a href="#" class="tip clear" title="清空"  data-placement="bottom"><i class="fa fa-trash"></i></a>
            <a href="#" class="tip save" title="保存"  data-placement="bottom"><i class="fa fa-download"></i></a>
            <a href="#" class="tip copy" title="复制" data-clipboard-target="#json-target"  data-placement="bottom"><i class="fa fa-copy"></i></a>
            <a href="#" class="tip compress" title="折叠"  data-placement="bottom"><i class="fa fa-compress"></i></a>
        </div>
        <div id="right-box" class="common-font-size"  style="width:100%;height: 87vh;min-height:520px;border:solid 1px #f6f6f6;border-radius:0;resize: none;overflow-y:scroll; outline:none;position:relative;padding-top:40px;">
            <div id="line-num" style="background-color:#fafafa;padding:0px 8px;float:left;border-right:dashed 1px #E5EBEE;display:none;z-index:-1;color:#999;position:absolute;text-align:center;over-flow:hidden;">
                <div>0</div>
            </div>
            <div class="ro" id="json-target" style="padding:0px 40px;white-space: pre-line;word-wrap:break-word;">
            </div>
        </div>
        <form id="form-save" method="POST"><input type="hidden" value="" id="txt-content" name="content"></form>
    </div>
    <br style="clear:both;" />
</main>
<link rel="stylesheet" href="css/jquery.numberedtextarea.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.message.js"></script>
<script src="js/bignumber.min.js"></script>
<script src="js/jquery.json.js"></script>
<script src="js/jquery.xml2json.js"></script>
<script src="js/jquery.json2xml.js"></script>
<script src="js/json2.js"></script>
<script src="js/jsonlint.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.numberedtextarea.js"></script>
<script type="text/javascript">
    $(function() {
        var searchUrl = window.location.href;
        var searchData = searchUrl.split("="); //截取 url中的“=”,获得“=”后面的参数
        if(searchData.length > 1){
            var searchText = decodeURI(searchData[1]);
            $("#json-src").val(searchText);
            $('#json-src').keyup();
        }
    });

    $('textarea').numberedtextarea();
    var current_json = '';
    var current_json_str = '';
    var xml_flag = false;
    var zip_flag = false;
    var shown_flag = false;
    var compress_flag = false;
    $('.tip').tooltip();
    function init(){
        xml_flag = false;
        zip_flag = false;
        shown_flag = false;
        compress_flag = false;
        // renderLine();
        $('.xml').attr('style','color:#999;');
        $('.zip').attr('style','color:#999;');

        // 默认显示行号
        // shown_flag = true;
        // $('.numberedtextarea-line-numbers').show();
        // $('#line-num').show();
        // $('.shown').attr('style','color:#15b374;');
    }
    $('#json-src').keyup(function(){
        init();
        var content = $.trim($(this).val());
        var result = '';
        if (content!='') {
            //如果是xml,那么转换为json
            if (content.substr(0,1) === '<' && content.substr(-1,1) === '>') {
                try{
                    var json_obj = $.xml2json(content);
                    content = JSON.stringify(json_obj);
                }catch(e){
                    result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                    current_json_str = result;
                    $('#json-target').html(result);
                    return false;
                }

            }
            try{
                current_json = jsonlint.parse(content);
                current_json_str = JSON.stringify(current_json);
                result = new JSONFormat(content,4).toString();
            }catch(e){
                result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
                current_json_str = result;
            }

            $('#json-target').html(result);
        }else{
            $('#json-target').html('');
        }
        renderLine();
    });
    $('.xml').click(function(){
        if (xml_flag) {
            $('#json-src').keyup();
        }else{
            var result = $.json2xml(current_json);
            $('#json-target').html('<textarea style="width:100%;position:absolute;height: 80vh;min-height:480px;border:0;resize:none;">'+result+'</textarea>');
            xml_flag = true;
            $(this).attr('style','color:#15b374;');
        }
    });
    $('.shown').click(function(){
        if (!shown_flag) {
            renderLine();
            $('.numberedtextarea-line-numbers').show();
            $('#line-num').show();
            shown_flag = true;
            $(this).attr('style','color:#15b374;');
        }else{
            $('.numberedtextarea-line-numbers').hide();
            $('#line-num').hide();
            shown_flag = false;
            $(this).attr('style','color:#999;');
        }
    });
    function renderLine(){
        var line_num = Math.round($('#json-target').height()/17);
        console.log("line_num："+line_num);
        // 0-1
        if(line_num == "0" || line_num == "1" || line_num == "2"){
            console.log("默认行：1");
            $('#line-num').html("");
            $('#line-num').html("<div>1<div>");
        }
        // 3-21
        else if(line_num >=3 && line_num <= 21){
            appendLineNum(line_num);
        }
        // 22-63
        else if(line_num >= 23 && line_num <= 64){
            line_num -= 1;
            appendLineNum(line_num);
        }
        // 64-105
        else if(line_num >= 66 && line_num <= 107){
            line_num -= 2;
            appendLineNum(line_num);
        }
        // 106-146
        else if(line_num >= 109 && line_num <= 147){
            line_num -= 3;
            appendLineNum(line_num);
        }
        // 147-189
        else if(line_num >= 149 && line_num <= 193){
            line_num -= 4;
            appendLineNum(line_num);
        }
        // 190-230
        else if(line_num >= 195 && line_num <= 235){
            line_num -= 5;
            appendLineNum(line_num);
        }
        // 231-273
        else if(line_num >= 237 && line_num <= 279){
            line_num -= 6;
            appendLineNum(line_num);
        }
        // 274-314
        else if(line_num >= 281 && line_num <= 321){
            line_num -= 7;
            appendLineNum(line_num);
        }
        // 315-356
        else if(line_num >= 323 && line_num <= 364){
            line_num -= 8;
            appendLineNum(line_num);
        }
        // 357-398
        else if(line_num >= 366 && line_num <= 407){
            line_num -= 9;
            appendLineNum(line_num);
        }
        // 399-439
        else if(line_num >= 366 && line_num <= 449){
            line_num -= 10;
            appendLineNum(line_num);
        }
        // 440-482
        else if(line_num >= 451 && line_num <= 493){
            line_num -= 11;
            appendLineNum(line_num);
        }
        else{
            line_num -= 12;
            appendLineNum(line_num);
        }
    }
    // 追加行号
    function appendLineNum(line_num){
        console.log("行数："+line_num);

        $('#line-num').html("");
        var line_num_html = "";
        for (var i = 0; i < line_num; i++) {
            line_num_html += "<div>"+(i+1)+"<div>";
        }
        $('#line-num').html(line_num_html);
    }
    $('.zip').click(function(){
        if (zip_flag) {
            $('#json-src').keyup();
        }else{
            //$('#json-target').html(current_json_str.replace(/</g,"&lt;").replace(/>/g,"&gt;"));
            $('#json-target').html("<xmp>"+current_json_str+"</xmp>");
            zip_flag = true;
            $(this).attr('style','color:#15b374;');
        }

    });
    $('.compress').click(function(){
        if(!compress_flag){
            $(this).attr('style','color:#15b374;');
            //$(this).attr('title','取消折叠').tooltip('fixTitle').tooltip('show');
            $($(".fa-minus-square-o").toArray().reverse()).click();
            compress_flag = true;
        }else{
            while($(".fa-plus-square-o").length>0){
                $(".fa-plus-square-o").click();
            }
            compress_flag = false;
            $(this).attr('style','color:#555;');
            $(this).attr('title','折叠').tooltip('fixTitle').tooltip('show');
        }
    });
    $('.clear').click(function(){
         $('#json-src').val('');
         $('#json-target').html('');
    });
    (function($){
       $.fn.innerText = function(msg) {
             if (msg) {
                if (document.body.innerText) {
                   for (var i in this) {
                      this[i].innerText = msg;
                   }
                } else {
                   for (var i in this) {
                      this[i].innerHTML.replace(/&amp;lt;br&amp;gt;/gi,"n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                   }
                }
                return this;
             } else {
                if (document.body.innerText) {
                   return this[0].innerText;
                } else {
                   return this[0].innerHTML.replace(/&amp;lt;br&amp;gt;/gi,"n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                }
             }
       };
    })(jQuery);
    $('.save').click(function(){
        var html = $('#json-target').html().replace(/\n/g,'<br/>').replace(/\n/g,'<br>');
        var text = $('#json-target').innerText().replace('　　', '    ');
        var blob = new Blob([text], {type: "application/json;charset=utf-8"});
        var timestamp=new Date().getTime();
        saveAs(blob, "format."+timestamp+".json");
    });
    $('.copy').click(function(){
        //$.msg("成功复制到粘贴板","color:#00D69C;");
        // $(this).tooltip('toggle')
        //       .attr('data-original-title', "复制成功！")
        //       .tooltip('fixTitle')
        //       .tooltip('toggle');
    });
    var clipboard = new Clipboard('.copy');
    $('#json-src').keyup();
</script>

</body>
</html>
